<template>
  <div id="dashboard">
    <!-- 第一层 -->
    <div class="content_1">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6"
          ><div class="grid-content bg-purple">
            <el-information
              >销售额
              <template v-slot:num> {{ infoList.sales }} </template>
              <template v-slot:price>{{ infoList.yesterdaySales }}元</template>
            </el-information>
          </div></el-col
        >
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6"
          ><div class="grid-content bg-purple">
            <el-information
              >用户访问量
              <template v-slot:num> {{ infoList.pageviews }} </template>
              <template v-slot:price>{{
                infoList.yesterdayPageviews
              }}</template>
            </el-information>
          </div></el-col
        >
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6"
          ><div class="grid-content bg-purple">
            <el-information
              >订单量
              <template v-slot:num> {{ infoList.newUserNum }} </template>
              <template v-slot:price
                >{{ infoList.yesterdayOrderNum }}单</template
              >
            </el-information>
          </div></el-col
        >
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6"
          ><div class="grid-content bg-purple">
            <el-information
              >新增用户
              <template v-slot:num>{{ infoList.newUserNum }}</template>
              <template v-slot:price
                >{{ infoList.yesterdayNewUserNum }}人</template
              >
            </el-information>
          </div></el-col
        >
      </el-row>
    </div>
    <!-- 第二层 -->

    <div class="content_2">
      <ei-adminList></ei-adminList>
    </div>
    <!-- 第三层 -->

    <div class="content_3">
      <div class="grid-content bg-purple-dark">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="list_hd">
              <span class="dDan">订单统计</span>
              <div>
                <el-radio-group v-model="tabPosition" @change="getDatas">
                  <el-radio-button label="day">30天</el-radio-button>
                  <el-radio-button label="week">周</el-radio-button>
                  <el-radio-button label="month">月</el-radio-button>
                  <el-radio-button label="year">年</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="eachTitle">订单量趋势</div>
            <el-echarts_list :dataList="eachartList"></el-echarts_list>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content_3">
      <div class="grid-content bg-purple-dark">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="list_hd">
              <span class="dDan">用户统计</span>
            </div>
            <el-echarts_two :dataList="list_two"></el-echarts_two>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
//组件
const information = () => import("@/components/dashboard/information.vue");
const adminList = () => import("@/components/dashboard/adminList.vue");
const echarts_list = () => import("@/components/echarts/echarts_list.vue");
const echarts_two = () => import("@/components/echarts/eaharts_two.vue");
//引入api
import {
  getData,
  getEchart,
  getWeek,
  getMonth,
  getYear,
  getUserList,
} from "@/network/api/article";
export default {
  name: "dashboard",
  data() {
    return {
      infoList: {},
      // 可视化数据
      eachartList: {
        dateList: [], //底部日期
        priceList: [], //现在
        qualityList: [], //现在
        prePriceList: [], //上周
        preQualityList: [], //上周
        cation: {
          now: "订单金额",
          nowNum: "订单数",
          previous: "",
          previousNum: "",
        },
        maxNum: 250,
        intervalNum: 50,
      },
      list_two: {
        date: [],
        num: [],
      },
      tabPosition: "day",
    };
  },
  components: {
    "el-information": information,
    "ei-adminList": adminList,
    "el-echarts_list": echarts_list,
    "el-echarts_two": echarts_two,
  },
  async created() {
    let res = await getData();
    this.infoList = res.data.data;
    this.getDay();
    this.getUser();
  },
  methods: {
    getDatas(val) {
      switch (val) {
        case "week":
          this.getWeekData();
          break;
        case "month":
          this.getMonthList();
          break;
        case "year":
          this.getYearData();
          break;
        default:
          this.getDay();
          break;
      }
    },
    //处理30天的数据
    async getDay() {
      let res1 = await getEchart();
      this.setdata(res1, 1);
      this.eachartList.cation = {
        now: "订单金额",
        nowNum: "订单数",
        previous: "",
        previousNum: "",
      };
    },
    //处理每周的数据
    async getWeekData() {
      let res = await getWeek();
      this.setdata(res);
      this.eachartList.cation = {
        now: "上周金额",
        previous: "本周金额",
        nowNum: "上周订单数",
        previousNum: "本周订单数",
      };
    },
    //处理每月的数据
    async getMonthList() {
      let res = await getMonth();
      this.setdata(res);
      this.eachartList.cation = {
        now: "上月金额",
        previous: "本月金额",
        nowNum: "上月订单数",
        previousNum: "本月订单数",
      };
    },
    //处理每年的数据
    async getYearData() {
      let res = await getYear();
      this.setdata(res);
      this.eachartList.cation = {
        now: "去年金额",
        previous: "今年金额",
        nowNum: "去年订单数",
        previousNum: "今年订单数",
      };
      this.eachartList.maxNum = 500;
      this.eachartList.intervalNum = 100;
    },

    //处理api传入的数据

    setdata(res1, n) {
      res1 = res1.data.data;
      this.eachartList.dateList = Object.keys(res1.price); //日期
      this.eachartList.priceList = Object.values(res1.price);
      this.eachartList.qualityList = Object.values(res1.quality);
      if (n == 1) {
        this.eachartList.prePriceList = []; //上周的前
        this.eachartList.preQualityList = []; //上周的单数
        return;
      }
      if (res1.prePrice) {
        this.eachartList.prePriceList = Object.values(res1.prePrice); //上周的前
        this.eachartList.preQualityList = Object.values(res1.preQuality); //上周的单数
      }
    },
    //处理用户数据
    async getUser() {
      let res = await getUserList();

      this.list_two.date = Object.keys(res.data.data);
      this.list_two.num = Object.values(res.data.data);
    },
  },
};
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
.content_2,
.content_3 {
  margin-top: 20px;
}
.list_hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.eachTitle {
  font-weight: 600;
  font-size: 12px;
  margin-top: 20px;
}
.dDan {
  display: inline-block;
  padding: 0 5px;
  border-left: 2px solid blue;
}
</style>